<template>
  <div class="home">
      <Item v-for="(item,index) in list" :key="index" :item="item" @getList="getList"></Item>
      <div>
          <span v-for="n in num" @click="change(n)">{{n}}</span>
      </div>
      <button @click="$router.push('/add')">发表博客</button>
  </div>
</template>

<script>
// @ is an alias to /src
import request from '../util/request'
import Item from '@/components/item.vue'
import moment from 'moment'

export default {
    name: 'Home',
    data(){
        return {
            list:[],
            num:0,      //总页数
            limit:2,    //每页的条数
            pagenum:1   //页码
        }
    },
    components:{
        Item
    },
    created(){
        this.getList();
    },
    methods:{
        getList(){
            request.get('/api/list',{pagenum:this.pagenum,limit:this.limit}).then(res => {
                if(res.data.code === 1){
                    res.data.data.forEach(item => {
                        item.time = moment(item.time).format('YYYY-MM-DD');
                    })
                    this.list = res.data.data;
                    this.num = Math.ceil(res.data.total/this.limit);
                }
            })
        },
        //切换页码
        change(n){
            this.pagenum = n;
            this.getList();
        }
    }
}
</script>
